<!doctype html>
<html lang="zh">
    <head>
        <meta charset="UTF-8">
            <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
                <meta name="viewport" content="width=device-width, initial-scale=1.0">
                    <title></title>
                    <style>
                        #loading{
                            background-color: #FFF;
                            height: 100%;
                            width: 100%;
                            position: fixed;
                            z-index: 1;
                            margin-top: 0px;
                            top: 0px;
                        }
                    #loading-center{
                        width: 100%;
                        height: 100%;
                        position: relative;
                    }
                    #loading-center-absolute {
                        position: absolute;
                        left: 50%;
                        top: 40%;
                        height: 60px;
                        width: 60px;
                        margin-top: -30px;
                        margin-left: -30px;
                        -webkit-animation: loading-center-absolute 1s infinite;
                        animation: loading-center-absolute 1s infinite;
                        
                    }
                    .object{
                        width: 20px;
                        height: 20px;
                        background-color: rgb(229,64,58);
                        float: left;
                        -moz-border-radius: 50% 50% 50% 50%;
                        -webkit-border-radius: 50% 50% 50% 50%;
                        border-radius: 50% 50% 50% 50%;
                        margin-right: 20px;
                        margin-bottom: 20px;
                    }
                    .object:nth-child(2n+0) {
                        margin-right: 0px;
                        
                    }
                    #object_one{
                        -webkit-animation: object_one 1s infinite;
                        animation: object_one 1s infinite;
                    }
                    #object_two{
                        -webkit-animation: object_two 1s infinite;
                        animation: object_two 1s infinite;
                    }
                    #object_three{
                        -webkit-animation: object_three 1s infinite;
                        animation: object_three 1s infinite;
                    }
                    #object_four{
                        -webkit-animation: object_four 1s infinite;
                        animation: object_four 1s infinite;
                    }
                    
                    @-webkit-keyframes loading-center-absolute{
                        100% {
                            -ms-transform: rotate(360deg);
                            -webkit-transform: rotate(360deg);
                            transform: rotate(360deg);
                        }
                        
                    }
                    @keyframes loading-center-absolute{
                        100% {
                            -ms-transform: rotate(360deg);
                            -webkit-transform: rotate(360deg);
                            transform: rotate(360deg);
                        }
                    }
                    @-webkit-keyframes object_one{
                        50% {
                            -ms-transform: translate(20px,20px);
                            -webkit-transform: translate(20px,20px);
                            transform: translate(20px,20px);
                        }
                    }
                    @keyframes object_one{
                        50% {
                            -ms-transform: translate(20px,20px);
                            -webkit-transform: translate(20px,20px);
                            transform: translate(20px,20px);
                        }
                    }
                    @-webkit-keyframes object_two{
                        50% {
                            -ms-transform: translate(-20px,20px);
                            -webkit-transform: translate(-20px,20px);
                            transform: translate(-20px,20px);
                        }
                    }
                    @keyframes object_two{
                        50% {
                            -ms-transform: translate(-20px,20px);
                            -webkit-transform: translate(-20px,20px);
                            transform: translate(-20px,20px);
                        }
                    }
                    @-webkit-keyframes object_three{
                        50% {
                            -ms-transform: translate(20px,-20px);
                            -webkit-transform: translate(20px,-20px);
                            transform: translate(20px,-20px);
                        }
                    }
                    @keyframes object_three{
                        50% {
                            -ms-transform: translate(20px,-20px); 
                            -webkit-transform: translate(20px,-20px);
                            transform: translate(20px,-20px);
                        }
                    }
                    @-webkit-keyframes object_four{
                        50% {
                            -ms-transform: translate(-20px,-20px); 
                            -webkit-transform: translate(-20px,-20px);
                            transform: translate(-20px,-20px);
                        }
                    }		
                    @keyframes object_four{
                        50% {
                            -ms-transform: translate(-20px,-20px); 
                            -webkit-transform: translate(-20px,-20px);
                            transform: translate(-20px,-20px);
                        }
                    }
                    </style>
                    <!--[if IE]>
                     <script src="http://libs.useso.com/js/html5shiv/3.7/html5shiv.min.js"></script>
                     <![endif]-->
    </head>
    <body>
        <div id="loading">
            <div id="loading-center">
                <div id="loading-center-absolute">
                    <div class="object" id="object_one"></div>
                    <div class="object" id="object_two"></div>
                    <div class="object" id="object_three"></div>
                    <div class="object" id="object_four"></div>
                </div>
            </div>
        </div>
                </div>
    </body>
</html>